import React, { Component } from 'react'
import './App.scss'
import { Header, List, Footer } from './cps'
import { getTodos, addTodos, updateTodos, deleteTodos } from '@/api/todos.js'

export default class App extends Component {
  state = {
    todos: [],
    msg: 'msg'
  }
  render() {
    const { todos } = this.state
    return (
      <div className="container">
        <h1>todoList案例 </h1>
        <Header click={(todo) => this.addTodos(todo)} />
        <List
          todos={todos}
          change={(id, completed) => this.updateTodos(id, completed)}
          click={(id) => this.deleteTodos(id)}
        />
        <Footer
          doneCount={this.doneCount()}
          todoTotal={this.todoTotal()}
          checked={this.getAllCheckboxState()}
          change={(checked) => this.chekboxAll(checked)}
          clearAllDone={this.clearAllDone}
        />
      </div>
    )
  }

  componentDidMount() {
    this.getTodos()
  }

  getTodos() {
    getTodos().then((res) => {
      this.setState({
        todos: res.data
      })
    })
  }

  async addTodos(todo) {
    await addTodos(todo)
    this.getTodos()
  }
  async updateTodos(id, completed) {
    await updateTodos(id, !completed)
    this.getTodos()
  }

  async deleteTodos(id) {
    await deleteTodos(id)
    this.getTodos()
  }
  // 已完成数量
  doneCount() {
    // return this.state.todos.filter((todo) => {
    //   if (todo.completed === true) {
    //     return todo
    //   }
    // }).length
    return this.state.todos.reduce(
      (pre, cur) => pre + (cur.completed ? 1 : 0),
      0
    )
  }
  // 总数
  todoTotal() {
    return this.state.todos.length
  }
  // 计算选中状态
  getAllCheckboxState() {
    return this.state.todos.every((v) => v.completed)
  }
  // 反选
  chekboxAll(checked) {
    const { todos } = this.state
    const newTodos = todos.map((todo) => {
      return { ...todo, completed: checked }
    })

    // const newTodos = todos.map((todo) => {
    //   todo.completed = checked
    //   return todo
    // })
    this.setState({ todos: newTodos })
  }

  // 清除所以已经完成的任务
  clearAllDone = () => {
    const { todos } = this.state
    const newTodos = todos.filter((item) => {
      return !item.completed
    })
    this.setState({ todos: newTodos })
    this.doneCount()
    this.todoTotal()
  }
}
